<template>
<div class="editor-main">
    <div class="editor-left">
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" :size="size" ref="filters">
                <el-form-item prop="promName">
                    <el-input v-model="filters.promName" placeholder="活动名称"></el-input>
                </el-form-item>
                <el-form-item prop="id">
                    <el-input v-model="filters.id" placeholder="活动ID"></el-input>
                </el-form-item>
                <el-form-item prop="promType">
                    <el-select v-model="filters.promType" placeholder="活动类型">
                        <el-option v-for="item in promTypes" :key="item.type" :label="item.name" :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item prop="creator">
              <el-input v-model="filters.creator" placeholder="创建人"></el-input>
            </el-form-item> -->
                <el-form-item prop="channelCode">
                    <el-select v-model="filters.channelCode" placeholder="活动渠道">
                        <el-option v-for="item in channelCodes" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="merchantId">
                    <el-select v-model="filters.merchantId" placeholder="活动商家">
                        <el-option v-for="item in merchantIds" :key="item.merchantId" :label="item.label" :value="item.merchantId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="storeId">
                    <el-select v-model="filters.storeId" placeholder="活动店铺">
                        <el-option v-for="item in storeIds" :key="item.storeId" :label="item.label" :value="item.storeId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="startTime">
                    <el-date-picker v-model="filters.startTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="活动开始" class="input_postion" style="width:187px"></el-date-picker>
                </el-form-item>
                <el-form-item prop="endTime">
                    <el-date-picker v-model="filters.endTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="活动结束" class="input_postion" style="width:187px"></el-date-picker>
                </el-form-item>
                <el-row>
                    <el-form-item>
                        <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" />
                    </el-form-item>
                    <el-form-item>
                        <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
                    </el-form-item>
                </el-row>
            </el-form>
        </div>

        <el-table :header-cell-style="rowStyle" ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
            <el-table-column property="活动ID" label="活动ID">
            </el-table-column>
            <el-table-column property="活动名称" label="活动名称">
            </el-table-column>
            <el-table-column property="活动类型" label="活动类型">
            </el-table-column>
            <el-table-column property="状态" label="状态">
            </el-table-column>
            <el-table-column property="活动时间" label="活动时间" width="320">
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <!-- <el-button @click="setCurrent(tableData[1])">选中第二行</el-button> -->
            <el-button type="primary" @click="setCurrent()" :size="size">取消选择</el-button>
        </div>
    </div>
    <div class="editor-container" v-if="isShow">
        <div class="editor-header"></div>
        <div class="editor-main-container">
            <!-- 模块部分 -->
            <div class="module" v-for="item in selectedList" :key="item.id" :data-id="item.id">
                <img :src="item.imgUrl" class="module-image">
                <div class="editor-module">
                    <a href="javascript:;" class="delete" @click="deleteItem(item)">删除</a>
                </div>
            </div>

            <!-- 所有模块按钮 -->
            <div class="edit-button-container">
                <div class="edit-button" v-for="item in totalList" :key="item.id" :data-id="item.id">
                    <a href="javascript:;" @click="edit(item)">{{ item.title }}</a>
                    <img :src="item.imgUrl" class="edit-image">
                </div>
            </div>
        </div>
        <!-- 保存按钮 -->
        <div class="save-container">
            <a href="javascript:;" class="save" @click="saveEdit">保存配置</a>
        </div>
    </div>
</div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
export default {
    components: {
        KtButton
    },
    data() {
        return {
            isShow: false,
            merchantIds: [],
            promTypes: [{
                    "name": "单一促销",
                    "type": 1,
                    code: "sigle_promotion"
                },
                {
                    "name": "单品X件优惠",
                    "type": 2,
                    code: "sigle_promotion"
                },
                {
                    "name": "满额促销",
                    "type": 3,
                    code: "mane_promotion"
                },
                {
                    "name": "满量促销",
                    "type": 4,
                    code: "mane_promotion"
                },
                {
                    "name": "赠送类促销",
                    "type": 5,
                    code: "mane_promotion"
                },
                {
                    "name": "组合促销",
                    "type": 6,
                    code: "mane_promotion"
                },
                {
                    "name": "秒杀",
                    "type": 7,
                    code: "mane_promotion"
                },
                {
                    "name": "拼团",
                    "type": 8,
                    code: "mane_promotion"
                },
                {
                    "name": "换购",
                    "type": 9,
                    code: "mane_promotion"
                },
                {
                    "name": "预售",
                    "type": 10,
                    code: "mane_promotion"
                },
                {
                    "name": "抽奖",
                    "type": 11,
                    code: "mane_promotion"
                },
            ],
            channelCodes: [{
                    "name": "请选择",
                    "code": null
                },
                {
                    "name": "BBC",
                    "code": "110001"
                }
            ],
            size: "mini",
            filters: {},
            rowStyle: {
                color: "rgb(255, 255, 255)",
                background: "rgb(64, 158, 255)"
            },
            imglist: [],
            hasSelectedList: false, // 是否有选择数据，用来判断保存时的method值。
            tableData: [{
                活动ID: '33205',
                活动名称: '秒杀活动1小时',
                活动类型: '秒杀',
                状态: "已结束",
                活动时间: "2020-02-21 13:40:00 - 2020-02-21 14:40:00"
            }, {
                活动ID: '33206',
                活动名称: '秒杀活动3小时',
                活动类型: '秒杀',
                状态: "已结束",
                活动时间: "2020-02-21 13:40:00 - 2020-02-21 16:40:00"
            }, {
                活动ID: '34205',
                活动名称: '满10元减5',
                活动类型: '满额促销',
                状态: "已结束",
                活动时间: "2019-09-23 18:47:03 - 2019-10-01 18:47:06"
            }, {
                活动ID: '36205',
                活动名称: '单一促销测试001',
                活动类型: '单一促销',
                状态: "已审核",
                活动时间: "2020-03-21 15:40:00 - 2020-02-22 00:00:00"
            }, {
                活动ID: '43205',
                活动名称: '满2件9折',
                活动类型: '单品X件优惠',
                状态: "已结束",
                活动时间: "2019-10-11 00:00:00 - 2019-10-16 10:06:22"
            }, {
                活动ID: '53205',
                活动名称: '第2杯半价',
                活动类型: '单品X件优惠',
                状态: "进行中",
                活动时间: "2019-09-28 17:36:33 - 2019-10-01 17:36:35"
            }, {
                活动ID: '83205',
                活动名称: '满100换购',
                活动类型: '换购',
                状态: "已结束",
                活动时间: "2019-12-13 15:04:35 - 2019-12-20 15:04:37"
            }, {
                活动ID: '86205',
                活动名称: '满1000换购',
                活动类型: '换购',
                状态: "已结束",
                活动时间: "2019-10-11 09:58:16 - 2019-10-16 09:58:18"
            }, ],
            currentRow: null,
            storeIds: [],
            merchantIds: []
        }
    },
    props: {
        // 所有模块数据
        totalList: {
            type: Array,
            default () {
                return [{
                        id: 1,
                        imgUrl: "/static/m1.png",
                        title: "爆品秒杀"
                    },
                    {
                        id: 2,
                        imgUrl: "/static/m2.png",
                        title: "居家生活"
                    },
                    {
                        id: 3,
                        imgUrl: "/static/m3.png",
                        title: "美妆护肤"
                    },
                    {
                        id: 4,
                        imgUrl: "/static/m4.png",
                        title: "数码家电"
                    },
                    {
                        id: 5,
                        imgUrl: "/static/m5.png",
                        title: "母婴保健"
                    },
                    {
                        id: 6,
                        imgUrl: "/static/m6.png",
                        title: "美食酒水"
                    },
                    {
                        id: 7,
                        imgUrl: "/static/m7.png",
                        title: "个护清洁"
                    },
                    {
                        id: 8,
                        imgUrl: "/static/m8.png",
                        title: "浙里集市"
                    },
                    {
                        id: 9,
                        imgUrl: "/static/m9.png",
                        title: "好物甄选"
                    },
                ]
            }
        },

        // 已选择的模块数据
        selectedList: {
            type: Array,
            default () {
                return [

                ]
            }
        },
    },
    methods: {
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
            this.isShow = false;
        },
        handleCurrentChange(val) {
            this.currentRow = val;
            this.selectedList = [];
            this.isShow = true;
        },
        // 删除对应的模块
        deleteItem(item) {
            // 获取当前模块id，在已选择数据中将该模块删除
            const selectedList = this.selectedList;
            const id = item.id;
            for (let i = 0; i < selectedList.length; i++) {
                if (id == selectedList[i].id) {
                    selectedList.splice(selectedList[i], 1);
                }
            }
        },

        // 编辑模块
        edit(item) {
            // 先获取已编辑模块数据，如果该模块已经存在，提示后返回，否则追加到已选择数据中
            const selectedList = this.selectedList;
            const totalList = this.totalList;
            const id = item.id;
            const list = [];
            selectedList.forEach(item => {
                list.push(item.id);
            });
            if (list.indexOf(id) > -1) {
                return this.$message({
                    message: "该模块已存在，请勿重复添加",
                    type: "success"
                });
            }
            selectedList.push(item);
        },

        // 保存设置
        saveEdit() {
            const hasSelectedList = this.hasSelectedList;
            const selectedList = this.selectedList;
            // 先查询自己的编辑设置数据，再进行更新
            this.utils.request.queryUserInfo({
                t: "indexConfig",
                sql: "queryIndexSortConfigInfo",
                clt: 1,
            }, res => {
                // debugger
                if (res.data == null) {
                    this.hasSelectedList = true;
                } else {
                    this.hasSelectedList = false;
                }
                const method = hasSelectedList ? 'saveIndexSortConfigInfo' : 'updateIndexSortConfigInfo';
                // 请求接口
                this.$confirm("保存后将影响H5首页的展现，请确认是否保存？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.utils.request.editInfo({
                        "t": "indexConfig",
                        "method": method,
                        clt: 1,
                        val: selectedList.map(item => item.id).toString(),
                        id: res == null ? null : res.id,
                    }, data => {
                        this.$message({
                            message: "排版成功",
                            type: "success"
                        });
                    })
                }).catch(() => {});

            });

        },

    },

    mounted() {
        let that = this;
        //  查询自己的设置模板数据
        this.utils.request.queryUserInfo({
            t: "indexConfig",
            sql: "queryIndexSortConfigInfo",
            clt: 1
        }, res => {
            if (res.data == null) {
                this.hasSelectedList = true;
                return;
            }
            let ids = res.data.val.split(",");
            for (let id in ids) {
                for (let item in that.totalList) {
                    if (that.totalList[item].id == ids[id]) {
                        that.selectedList.push(that.totalList[item])
                    }
                }
            }
        })

        //获取商家列表
        this.utils.request.queryMerchantList({
                start: 1,
                limit: 10
            },
            function (res) {
                if (res.code == "0000") {
                    res.data.forEach(item => {
                        let merchant = {};
                        merchant.merchantId = item.id;
                        merchant.label = item.name;
                        that.merchantIds.push(merchant);
                    });
                }
            }
        );

        this.utils.request.queryStoreList({
                start: 1,
                limit: 10,
                merchantId: this.filters.merchantId
            },
            function (res) {
                if (res.code == "0000") {
                    res.data.forEach(item => {
                        //,{'storeId':'0','label':'张小二bbc店铺'},{'storeId':'1','label':'张小二的京东店'}
                        let store = {};
                        store.storeId = item.id;
                        store.label = item.storeName;
                        that.storeIds.push(store);
                    });
                }
            }
        );

    }
}
</script>

<style lang="scss" scoped>
//  /deep/{
//   background-color: red;
// }
.optionBtnClass {
    margin-top: 5px;
    margin-bottom: 5px;
}

.editor-main {
    overflow: hidden;
}

.editor-left {
    float: left;
    text-align: left;
    width: 60%;
    vertical-align: top;
}

.editor-container {
    text-align: right;
    float: right;
    width: 500px;
    height: 700px;
    overflow-y: auto;
    overflow: hidden;
    margin: 20px 0 0 20px;

    .editor-header {
        width: 100%;
        height: 80px;
        border: 1px solid #ddd;
        position: relative;
        background: #f5f5f5;
        border-radius: 20px 20px 0 0;
        box-sizing: border-box;

        &::before {
            display: block;
            content: '';
            width: 14px;
            height: 14px;
            border-radius: 7px;
            background: #ddd;
            position: absolute;
            top: 35px;
            left: 160px;
        }

        &::after {
            content: '';
            display: block;
            width: 100px;
            height: 14px;
            border-radius: 7px;
            background: #ddd;
            position: absolute;
            top: 35px;
            left: 190px;
        }
    }

    .editor-main-container {
        max-height: 700px;
        overflow-y: scroll;
        width: 100%;
        position: relative;
        background: #fff;
        border: 1px solid #ddd;
        border-top: 0 none;
        padding: 10px;
        box-sizing: border-box;

        .module {
            position: relative;
            width: 100%;
            margin-bottom: 5px;

            .module-image {
                display: block;
                width: 100%;
                height: auto;
            }

            .editor-module {
                display: none;
                width: 100%;
                height: 100%;
                border: 1px dashed red;
                position: absolute;
                top: 0;
                left: 0;

                .delete {
                    display: inline-block;
                    padding: 6px 10px;
                    background-color: rgba(0, 0, 0, .7);
                    color: #fff;
                    font-size: 12px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    text-decoration: none;
                }
            }
        }

        .module:hover .editor-module {
            display: block;
        }

        .edit-button-container {
            width: 100%;
            padding-bottom: 60px;
            height: auto;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            .edit-button {
                position: relative;
                background-color: #39ac69;
                margin: 10px 15px;
                font-size: 12px;
                border-radius: 2px;

                a {
                    display: block;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    color: #fff;
                    text-decoration: none;
                }

                .edit-image {
                    display: none;
                    position: absolute;
                    bottom: 30px;
                    left: 0;
                    width: 200px;
                    display: none;
                    z-index: 9999;
                }
            }

            .edit-button:hover .edit-image {
                display: block;
            }
        }
    }

    .save-container {
        width: 460px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, .8);
        position: fixed;
        bottom: 0;

        .save {
            padding: 5px 10px;
            background-color: #39ac69;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
        }
    }
}
</style>
